<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频理解分析工具 M0</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 40px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }
        
        .main-content {
            padding: 40px;
        }
        
        .upload-area {
            border: 3px dashed #ddd;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            margin-bottom: 30px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .upload-area:hover {
            border-color: #4facfe;
            background: #f8f9ff;
        }
        
        .upload-area.dragover {
            border-color: #4facfe;
            background: #f0f8ff;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }
        
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #4facfe;
        }
        
        .btn {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(79, 172, 254, 0.3);
        }
        
        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .result-area {
            margin-top: 30px;
            padding: 25px;
            background: #f8f9fa;
            border-radius: 10px;
            display: none;
        }
        
        .loading {
            text-align: center;
            padding: 20px;
            display: none;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #4facfe;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .error {
            background: #ffe6e6;
            color: #d63031;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            display: none;
        }
        
        .success {
            background: #e6ffe6;
            color: #00b894;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }
        
        .result-content {
            white-space: pre-wrap;
            line-height: 1.6;
            color: #444;
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .nav-bar {
            background: #f8f9fa;
            padding: 15px 40px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .nav-link {
            color: #495057;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .nav-link:hover {
            background: #e9ecef;
            color: #007bff;
        }
        
        .nav-link.active {
            background: #007bff;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎬 视频理解分析工具</h1>
            <p>基于InternVL3.5的智能视频分析平台 - M0版本（直接视频理解）</p>
        </div>
        
        <div class="nav-bar">
            <a href="/" class="nav-link active">🏠 视频分析</a>
            <a href="/test" class="nav-link">🧪 测试上传</a>
            <a href="/videos" class="nav-link">📹 视频管理</a>
            <a href="/large-analysis" class="nav-link">🎞️ 大视频分析</a>
        </div>
        
        <div class="main-content">
            <form id="analysisForm" enctype="multipart/form-data">
                <div class="upload-area" id="uploadArea">
                    <div id="uploadText">
                        <h3>📁 选择或拖拽视频文件</h3>
                        <p>支持 MP4, AVI, MOV, MKV 格式，最大 50MB</p>
                        <input type="file" id="videoFile" name="file" accept=".mp4,.avi,.mov,.mkv" style="display: none;">
                    </div>
                    <div id="fileInfo" style="display: none;">
                        <h4 id="fileName"></h4>
                        <p id="fileSize"></p>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="template">选择分析模板：</label>
                    <select id="template" name="template_name">
                        <option value="general">通用分析</option>
                        <option value="object_detection">物体识别</option>
                        <option value="scene_analysis">场景分析</option>
                        <option value="action_recognition">动作识别</option>
                        <option value="content_summary">内容摘要</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="prompt">自定义提示词：</label>
                    <textarea id="prompt" name="prompt" rows="4" 
                              placeholder="请详细描述这个视频的内容，包括场景、人物、动作和主要事件。"></textarea>
                </div>
                
                <button type="submit" class="btn" id="analyzeBtn">
                    🚀 开始分析
                </button>
            </form>
            
            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p>正在使用InternVL3.5直接分析视频，请稍候...</p>
            </div>
            
            <div class="error" id="error"></div>
            
            <div class="result-area" id="resultArea">
                <h3>📊 分析结果</h3>
                <div class="result-content" id="resultContent"></div>
                <div style="margin-top: 20px;">
                    <a id="downloadLink" class="btn" style="display: inline-block; text-decoration: none;">
                        📥 下载完整报告
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 模板提示词映射
        const templates = {
            general: "请详细描述这个视频的内容，包括场景、人物、动作和主要事件。",
            object_detection: "请识别视频中出现的所有物体和人物，并描述它们的位置和动作。",
            scene_analysis: "请分析视频的场景设置、环境特征和氛围。",
            action_recognition: "请识别和描述视频中发生的所有动作和行为。",
            content_summary: "请为这个视频提供一个简洁的内容摘要。"
        };
        
        // DOM元素
        const uploadArea = document.getElementById('uploadArea');
        const videoFile = document.getElementById('videoFile');
        const uploadText = document.getElementById('uploadText');
        const fileInfo = document.getElementById('fileInfo');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        const templateSelect = document.getElementById('template');
        const promptTextarea = document.getElementById('prompt');
        const analysisForm = document.getElementById('analysisForm');
        const analyzeBtn = document.getElementById('analyzeBtn');
        const loading = document.getElementById('loading');
        const error = document.getElementById('error');
        const resultArea = document.getElementById('resultArea');
        const resultContent = document.getElementById('resultContent');
        const downloadLink = document.getElementById('downloadLink');
        
        // 文件上传处理
        uploadArea.addEventListener('click', () => videoFile.click());
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFileSelect(files[0]);
            }
        });
        
        videoFile.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFileSelect(e.target.files[0]);
            }
        });
        
        function handleFileSelect(file) {
            fileName.textContent = file.name;
            fileSize.textContent = `文件大小: ${(file.size / 1024 / 1024).toFixed(2)} MB`;
            uploadText.style.display = 'none';
            fileInfo.style.display = 'block';
        }
        
        // 模板选择处理
        templateSelect.addEventListener('change', (e) => {
            const selectedTemplate = e.target.value;
            if (templates[selectedTemplate]) {
                promptTextarea.value = templates[selectedTemplate];
            }
        });
        
        // 表单提交处理
        analysisForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            if (!videoFile.files[0]) {
                showError('请选择视频文件');
                return;
            }
            
            if (!promptTextarea.value.trim()) {
                showError('请输入分析提示词');
                return;
            }
            
            // 显示加载状态
            analyzeBtn.disabled = true;
            loading.style.display = 'block';
            error.style.display = 'none';
            resultArea.style.display = 'none';
            
            try {
                const formData = new FormData();
                formData.append('file', videoFile.files[0]);
                formData.append('prompt', promptTextarea.value);
                formData.append('template_name', templateSelect.value);
                
                const response = await fetch('/api/analyze', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                
                if (result.success) {
                    showResult(result.result, result.report_url);
                } else {
                    showError(result.message || '分析失败');
                }
            } catch (err) {
                showError('网络错误，请重试');
            } finally {
                analyzeBtn.disabled = false;
                loading.style.display = 'none';
            }
        });
        
        function showError(message) {
            error.textContent = message;
            error.style.display = 'block';
        }
        
        function showResult(result, reportUrl) {
            resultContent.textContent = result;
            downloadLink.href = reportUrl;
            resultArea.style.display = 'block';
        }
    </script>
</body>
</html>